<template>
    <div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
        </el-form-item>
        <el-button type="success" icon="el-icon-circle-plus" @click="showAddDialog">新增知识库</el-button>
      </el-form>
  
      <!-- 数据表格 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="ID" width="180"></el-table-column>
        <el-table-column prop="question" label="问题" width="180"></el-table-column>
        <el-table-column prop="answer" label="回答" width="500"></el-table-column>
        <el-table-column prop="createdAt" label="创建时间" width="180"></el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button type="primary" size="mini" @click="showEditDialog(scope.row)">编辑</el-button>
            <el-button type="danger" size="mini" @click="handleDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.pageNum"
        :page-sizes="[5, 10, 15]"
        :page-size="pagination.pageSize"
        layout="total, sizes, prev, pager, next"
        :total="total">
      </el-pagination>
  
      <!-- 新增/编辑对话框 -->
      <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="30%">
        <el-form :model="form" label-width="80px">
          <el-form-item label="问题">
            <el-input v-model="form.question"></el-input>
          </el-form-item>
          <el-form-item label="回答">
            <el-input v-model.number="form.answer"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleConfirm">确认</el-button>
        </span>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import axios from 'axios';
  
  export default {
    data() {
      return {
        formInline: {
          question: '',
          answer: ''
        },
        tableData: [],
        pagination: {
          pageNum: 1,
          pageSize: 10
        },
        total: 0,
        dialogVisible: false,
        dialogTitle: '新增知识库',
        form: {
          question: '',
          answer: ''
        }
      };
    },
    methods: {
      handleChange(value) {
          console.log(value);
        },
      handleSearch() {
        this.pagination.pageNum = 1;
        this.fetchData();
      },
      showAddDialog() {
        this.dialogTitle = '新增知识库';
        this.form = {
          question: '',
          answer: ''
        };
        this.dialogVisible = true;
      },
      showEditDialog(row) {
        this.dialogTitle = '编辑知识库';
        this.form = {
          id: row.id,
          question: row.question,
          answer: row.answer
        };
        this.dialogVisible = true;
      },
      handleDelete(id) {
        this.$confirm('确认删除该知识库吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.delete(`http://localhost:8888/knowledge/delete/${id}`).then(() => {
            this.$message.success('删除成功');
            this.fetchData();
          }).catch(() => {
            this.$message.error('删除失败');
          });
        }).catch(() => {});
      },
      handleSizeChange(pageSize) {
        this.pagination.pageSize = pageSize;
        this.fetchData();
      },
      handleCurrentChange(pageNum) {
        this.pagination.pageNum = pageNum;
        this.fetchData();
      },
      handleConfirm() {
        const url = this.dialogTitle === '新增知识库' ? 'http://localhost:8888/knowledge/add' : `http://localhost:8888/knowledge/update`;
        axios.post(url, this.form, {
          headers: {
            'Content-Type': 'application/json'
          }
        }).then(response => {
          if (response.code === 200) {
            this.$message.success(this.dialogTitle === '新增知识库' ? '新增成功' : '编辑成功');
            this.dialogVisible = false;
            this.fetchData();
          } else {
            this.$message.error(response.data || '操作失败');
          }
        }).catch(error => {
          if (error.response) {
            this.$message.error(error.data || '操作失败');
          } else {
            this.$message.error('操作失败');
          }
        });
      },
      fetchData() {
        const params = {
          pageNum: this.pagination.pageNum,
          pageSize: this.pagination.pageSize,
          question: this.formInline.question,
          answer: this.formInline.answer
        };
  
        axios.post('http://localhost:8888/knowledge/getList', params, {
          headers: {
            'Content-Type': 'application/json'
          }
        }).then(response => {
          
          if (response.code === 200) {
            this.tableData = response.data || [];
          } else {
            this.$message.error(response.message || '获取数据失败');
          }
        }).catch(() => {
          this.$message.error('获取数据失败');
        });
  
        axios.get('http://localhost:8888/knowledge/count', { params }).then(response => {
          this.total = response.data;
        }).catch(() => {
          this.$message.error('获取数据失败');
        });
      }
    },
    mounted() {
      this.fetchData();
    }
  };
  </script>
  
  <style scoped>
  .el-pagination {
    margin-top: 20px;
    text-align: right;
  }
  </style>
  